<template>
  <div id="guomilist"> 


          <el-table :data="guomidata" style="width: 100%" :height="dtheight" :header-cell-style="{background:'#4F81BC',color:'white'}"
           :row-class-name="tableRowClassName"  :border="true">

                <!-- <el-table-column label="ID"  align='center'>                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.apply_id }}</span>
                    </template>
                </el-table-column> -->
                <el-table-column label="时间"  align='center' width="180">                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.time }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="兑换数量"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.number }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="实际数量"  align='center' width="180">                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.real_number }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="订单状态"  align='center' width="250">                   
                    <template slot-scope="scope">                   
                        <span v-if="scope.row.status == 'SUBMITTED_VOUCHER'">新订单</span>
                        <span v-if="scope.row.status == 'REJECT'">已驳回</span>
                        <span v-if="scope.row.status == 'CONFIRMED' || scope.row.status == 'SELLER_OVERTIME' || scope.row.status == 'CANCELLED_SELLER' ">已完成</span>
                        <span v-if="scope.row.status == 'APPEAL_BUYER'">被申述</span>
                        <span v-if="scope.row.status == 'RESUBMITTED_VOUCHER'">新上传</span>
                        <span v-if="scope.row.status == 'APPEAL_SELLER'">卖家申诉</span>
                        <span v-if="scope.row.status == 'ADMIN_CANCEL'">已取消</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="用户"  align='center' width="180" >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.nickname }}</span>
                    </template>
                </el-table-column> -->
                <el-table-column label="兑换方账号"  align='center' width="180">                   
                    <template slot-scope="scope">                   
                        <span style="display:flex;align-items: center;justify-content: center;">
                            {{ scope.row.telphone }}
                            <img src="@/assets/images/a3.png" style="width:20px;height:20px;margin-left:10px;"  @click="mtk2_but(scope.row.telphone,scope.row,scope.row.uid)"/>
                            <img src="@/assets/images/a9.png"  style="width:18px;height:20px;margin-left:5px;" @click="goinforpersonal(scope.row,scope.row.telphone)"/>
                        </span>   
                    </template>
                </el-table-column>
                <el-table-column label="头像"  align='center' >                   
                    <template slot-scope="scope">   
                           <img    :src="urlimg + scope.row.head_img"  style="width:25px;height:25px;" />                
                    </template>
                </el-table-column>
                 <el-table-column label="所属团队"  align='center' width="250">                   
                    <template slot-scope="scope">                   
                        <span v-if="scope.row.team_leader">{{ scope.row.team_leader.nickname }}{{ scope.row.team_leader.telphone }}</span>
                    </template>
                </el-table-column>

                 <!-- <el-table-column label="奖励金额"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.discount }}</span>
                    </template>
                </el-table-column> -->
                
                <el-table-column label="查看凭证"  align='center' >    

                    <template slot-scope="scope">                   
                           <el-image 
                                style="width:25px; height:25px"
                                :src="urlimg + scope.row.voucher_link" 
                                :preview-src-list="scope.row.srcList" class="imga">
                             </el-image>
                           
                    </template>

                </el-table-column>

                 

                
 
                 <el-table-column label="操作" align='center' width="250" fixed="right">
                    <template slot-scope="scope">
                        <!-- 新订单 -->
                        <span v-if="scope.row.status == 'SUBMITTED_VOUCHER'"> 
                          <el-button size="mini"  type="primary" class="button_class1" plain @click="confirm_but(scope.row,'confirm')">确定</el-button> 
                          <el-button size="mini"  type="primary" class="button_class2" plain @click="reject_but(scope.row,'reject')">驳回</el-button> 
                          <el-button size="mini"  type="primary" class="button_class1" plain @click="cancel_but(scope.row,'cancel')">取消</el-button> 
                        </span> 
                        <!-- 已驳回 -->
                        <span v-if="scope.row.status == 'REJECT'" > 已驳回</span> 
                         <!--已完成 -->
                        <span  v-if="scope.row.status == 'CONFIRMED' || scope.row.status == 'SELLER_OVERTIME' || scope.row.status == 'CANCELLED_SELLER' "> 已完成</span>
                         <!--被申述 -->
                        <span v-if="scope.row.status == 'APPEAL_BUYER'"> 
                          <el-button size="mini" class="button_class1"  type="primary"  plain @click="confirm_but(scope.row,'confirm')">确定</el-button> 
                          <el-button size="mini" class="button_class2"  type="primary"  plain @click="explain_but(scope.row,'explain')">买方过错</el-button> 
                        </span> 
                         <!--新上传 -->
                         <span v-if="scope.row.status == 'RESUBMITTED_VOUCHER'"> 
                          <el-button size="mini" class="button_class1" type="primary"  plain @click="confirm_but(scope.row,'confirm')">确定</el-button> 
                          <el-button size="mini" class="button_class2"  type="primary"  plain @click="explain_but(scope.row,'explain')">申述</el-button> 
                        </span> 
                        
                    </template>
                </el-table-column>
  
            </el-table>  


             <!-- 申述 -->
        <el-dialog title="申述" :visible.sync="explain_mtk"  width="30%">
            <div style="width:100%;"> 

            <el-form ref="form"   label-width="100px" style="width:100%;">
                <el-form-item label="申述内容">
                    <el-input  type="textarea"  v-model="explain_form.content" placeholder="申述内容"></el-input>
                </el-form-item>                                   
            </el-form>

                <div style="text-align: center;width:50%;margin:auto;">
                    <el-button type="primary" style="width:80%;" @click="explain_but_qr">确认</el-button>
                </div>

            </div> 
        </el-dialog>

         <!-- 驳回 -->
        <el-dialog title="驳回" :visible.sync="reject_mtk"  width="30%">
            <div style="width:100%;"> 

            <el-form ref="form"   label-width="100px" style="width:100%;">
                <el-form-item label="驳回内容">
                    <el-input  type="textarea"  v-model="reject_form.content" placeholder="驳回内容"></el-input>
                </el-form-item>  

                  <el-form-item label="图片">
                       <el-upload 
                            action="uploadUrl"  
                            :show-file-list="false"   
                            :before-upload="beforeupload"
                            :http-request="ImgUploadSectionFile">
                             
                            <div class="avatar-uploader">
                                <img v-if="reject_form.head_img"  :src="reject_form.head_img" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </div>
                       </el-upload>
             </el-form-item>    

            </el-form>

                <div style="text-align: center;width:50%;margin:auto;">
                    <el-button type="primary" style="width:80%;" @click="reject_but_qr">确认</el-button>
                </div>

            </div> 
        </el-dialog>


        <el-dialog title="用户验证" :visible.sync="user_test.user_mtk"  width="400px" >
          <el-form ref="form" :model="user_test"  label-width="100px" style="width:100%;">
                <el-form-item label="" label-width="0px">
                    <el-input v-model="user_test.password" placeholder="二级密码" ></el-input>
                </el-form-item>
                <el-form-item label="" label-width="0px" >
                    <div style="display:flex;">
                        <el-input v-model="user_test.phone" placeholder="手机验证码" style="flex:1;"></el-input>
                         <el-button class="code_but1 custom_color_button" type="primary"  @click="getCode_yz()" :disabled="user_test.disabled" style="margin-left:10px;">
                          {{ user_test.codeText }}
                        </el-button>
                    </div>
                </el-form-item>
                <div style="text-align: center;width:50%;margin:auto;margin-top:20px;">
                  <el-button type="primary" class="custom_color_button" style="width:100%;" @click="user_mtk_but">确认</el-button>
                </div>
         </el-form>
         </el-dialog> 
       

       <el-dialog :title="mtk2_from.telphone + '-收款方式'" :visible.sync="mtk2"  width="700px" >
                  <div class="title_box" style="margin-top:-30px;">
                      <div class="dian"></div>
                      <div class="title_name">用户信息</div>
                </div>
                 <div class="box_top">
                    <div class="box_top_img">
                    <img :src="urlimg + mtk2_from.head_img" />
                    </div>
                    <div class="box_top_con">
                    <div class="box_top_name">{{ mtk2_from.nickname }}</div>
                    <div class="box_top_id">ID:{{ mtk2_from.telphone }}</div>
                    </div>
                </div>
                <div class="title_box" style="margin-top:10px;">
                      <div class="dian"></div>
                      <div class="title_name">收款码</div>
                </div>
                <div class="box_img_box">
                    <div class="item_img_box">                  
                          <span > 
                            <el-image  
                                v-if="mtk2_from.datalist.srcListwx"
                                :src="urlimg + mtk2_from.datalist.srcListwx" 
                                :preview-src-list="mtk2_from.datalist.srcList1" class="imga imgbox">
                            </el-image>
                             <span v-else>
                                 <img class="imgbox" src="@/assets/images/a6.png"/>
                             </span>  
                           </span> 
                         <div class="item_img_name">收款码（微信）</div>
                     </div>
                     <div class="item_img_box">                     
                        <span > 
                            <el-image  
                                v-if="mtk2_from.datalist.srcListzfb"
                                :src="urlimg + mtk2_from.datalist.srcListzfb" 
                                :preview-src-list="mtk2_from.datalist.srcList2" class="imga imgbox">
                            </el-image>
                             <span v-else>
                                 <img class="imgbox" src="@/assets/images/a6.png"/>
                             </span>  
                         </span>
                         <div class="item_img_name">收款码（支付宝）</div>
                     </div>
                     <div class="item_img_box">                   
                          <span > 
                            <el-image  
                                v-if="mtk2_from.datalist.srcListysf"
                                :src="urlimg + mtk2_from.datalist.srcListysf" 
                                :preview-src-list="mtk2_from.datalist.srcList3" class="imga imgbox">
                            </el-image>
                             <span v-else>
                                 <img class="imgbox" src="@/assets/images/a6.png"/>
                             </span>  
                           </span>
                          <div class="item_img_name">收款码（云闪付）</div>
                     </div>
                     <div class="item_img_box">                  
                         <span > 
                            <el-image  
                                v-if="mtk2_from.datalist.srcListjh"
                                :src="urlimg + mtk2_from.datalist.srcListjh" 
                                :preview-src-list="mtk2_from.datalist.srcList4" class="imga imgbox">
                            </el-image>
                             <span v-else>
                                 <img class="imgbox" src="@/assets/images/a6.png"/>
                             </span>  
                         </span>
                          <div class="item_img_name">收款码（聚合）</div>
                     </div>
                     <div class="item_img_box">
                           <span > 
                            <el-image  
                                v-if="mtk2_from.datalist.srcListyhk"
                                :src="urlimg + mtk2_from.datalist.srcListyhk" 
                                :preview-src-list="mtk2_from.datalist.srcList5" class="imga imgbox">
                            </el-image>
                             <span v-else>
                                 <img class="imgbox" src="@/assets/images/a6.png"/>
                             </span>  
                         </span>
                         <div class="item_img_name">收款码（银行卡）</div>
                     </div>
                </div>

           </el-dialog> 


   </div>
</template>

<script>

export default {
   name: 'guomilist',
   props:{
      guomidata:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        my_id:'',
        explain_mtk:false,
        explain_form:{
             content:'',
        },
        reject_mtk:false,
        reject_form:{
             content:'',
              head_img:'',
              upfile:'',
        },
        user_test:{  //用户判定
            user_mtk:false, //用户判定模态狂
            codeText:'获取验证码', //获取验证码字
            totalTime:60,  //获取验证码秒
            disabled:false, //禁用获取验证码
            password:'', //二级密码
            phone:'',  //验证码
            my_state:'', //判断是那种类型出现弹出框
        },

        mtk2:false,
        mtk2_from:{
            datalist:{},
           telphone:'',
           head_img:'',
           nickname:''
        },

    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 400
      
  },
  mounted (){
    
  },
  methods: {
    user_mtk_but(){

        this.getCode_yz_qr().then(res => {
            console.log(res)
            if(res == 1){
                 switch (this.user_test.my_state){
                        case 'confirm':
                            this.confirm_axios();
                            break;
                        case 'reject':
                            this.reject_axios();
                            break;
                        case 'explain':
                            this.explain_axios();
                            break;
                        case 'cancel':
                            this.cancel_axios();
                            break;
                        default :
                            alert("参数错误");
                            break;
                        }
            }
        })
  
    },
    confirm_axios(){
        this.post("/buy_kmb/sure", {
            id:this.my_id,
        }).then(res => {

            if(res.error_code == 0){
            this.open1(res.result,'success')  //提示框
            this.$emit('up_list_fun')
            }else {
            this.open1(res.message,'warning')
        }

        })
    },
    confirm_but(row,lx){
         this.user_test.my_state  = lx
         this.my_id = row.apply_id
         this.user_test.user_mtk = true        

   },
   explain_but(row,lx){
        this.user_test.my_state  = lx
        this.my_id = row.apply_id
        this.explain_mtk = true
        this.explain_form.content = ''   
   },
   explain_but_qr(){
        this.user_test.user_mtk = true    
   },
   explain_axios(){
         this.post("/buy_kmb/appeal", {
            id:this.my_id,
            content:this.explain_form.content
	    }).then(res => {

            if(res.error_code == 0){
               this.open1(res.result,'success')  //提示框
               this.explain_mtk = false
              this.$emit('up_list_fun')
            }else {
              this.open1(res.message,'warning')
           }
       

        })
   },
   reject_but(row,lx){
        this.my_id = row.apply_id
        this.user_test.my_state  = lx
        this.reject_mtk = true
        this.reject_form.content = ''
        this.reject_form.upfile = ''
        this.reject_form.head_img = ''
          
   },
   reject_but_qr(){
        this.user_test.user_mtk = true       
   },
   reject_axios(){
       this.post("/buy_kmb/reject", {
            id:this.my_id,
            content:this.reject_form.content,
            reason_picture:this.reject_form.upfile
	    }).then(res => {

            if(res.error_code == 0){
               this.open1(res.result,'success')  //提示框
               this.reject_mtk = false
              this.$emit('up_list_fun')
            }else {
              this.open1(res.message,'warning')
           }
       

        })
   },
    cancel_but(row,lx){
       this.my_id = row.apply_id
       this.user_test.my_state  = lx
       this.user_test.user_mtk = true  
    },
    cancel_axios(){
       this.post("/buy_kmb/cancelTrade", {
            id:this.my_id,
	    }).then(res => {

            if(res.error_code == 0){
               this.open1(res.result,'success')  //提示框
               this.$emit('up_list_fun')
            }else {
              this.open1(res.message,'warning')
           }
       

        })
    },
     ImgUploadSectionFile(param){//图片上传    
      },
       beforeupload(file){   //重新写入上穿 需要点击确认上传与表单一起提交
           if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误             
              return false
            }  
            var windowURL = window.URL || window.webkitURL;               
            this.reject_form.head_img=windowURL.createObjectURL(file);             
              
            
            this.upimgpost("/image/uploadMultiple",file).then(res => {
            this.reject_form.upfile = res.result.url    
           // console.log(res) 

           })

            return false;
     },
     mtk2_but(telphone,row,uid){

          this.post("/member/infoOfSomeone", {
              uid:uid,
	        }).then(res => {
              this.mtk2_from.head_img = res.result.head_img
              this.mtk2_from.telphone = res.result.telphone
              this.mtk2_from.nickname = res.result.nickname
            
                for(let a of res.result.qr_code) {

                if(a.collection_type == 1){
                    res.result.srcListwx = a.collection_picture
                    res.result.srcList1 = [this.urlimg + a.collection_picture]
                }else if(a.collection_type == 2){
                    res.result.srcListzfb = a.collection_picture
                    res.result.srcList2 = [this.urlimg + a.collection_picture]
                }else if(a.collection_type == 3){
                    res.result.srcListysf = a.collection_picture
                    res.result.srcList3 = [this.urlimg + a.collection_picture]
                }else if(a.collection_type == 4){
                    res.result.srcListjh = a.collection_picture
                    res.result.srcList4 = [this.urlimg + a.collection_picture]
                }else if(a.collection_type == 5){
                    res.result.srcListyhk = a.collection_picture
                    res.result.srcList5 = [this.urlimg + a.collection_picture]
                }

                }

             this.mtk2_from.datalist  =    res.result  
             console.log(this.mtk2_from.datalist)
         })

          this.mtk2 = true
    },
     goinforpersonal(row,telphone){      
        this.$router.push({
          path: '/index/inforpersonal',
          query: {
            name:telphone,
          }
        })
     },



  }
}
</script>


<style scoped>
.imga>>>.el-icon-circle-close {
      color: white;
}
.avatar-uploader  {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

.el-radio__input.is-checked>>>.el-radio__inner{
    border-color: red;
    background: red;
}
     .title_box{
        display: flex;
        align-items: center;
        margin-top: 8px;
    }
    .dian{
        width: 8px;
        height: 8px;
        background: #F1C94A;
        border-radius:50%;
        margin-right: 8px;
    }
    .title_name{
        font-size: 14px;;
        font-weight: 400;
        color: #000000;
    }
    .box_top{
       display: flex;
       margin-top:20px;
    }
    .box_top_img{
        width:60px;
        height: 60px;
    }
    .box_top_img>img{
        width:100%;
        height:100%;
        border-radius:50%;
    }
    .box_top_con{
        margin-left:10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .box_img_box{
        display: flex;
        margin-top: 10px;
    }
    .item_img_box:first-child{
        margin-left: 0px;
    }
    .item_img_box{
        flex:1;
        
        margin-left:5px;
    }
    .item_img_box>.imgbox{
        width: 100%;
        height:150px;
    }
    .imgbox{
        width: 100%;
        height:150px;
    }
    .item_img_name{
        margin-top: 10px;
        text-align: center;
    }
</style>